<template>
  <div class="addGroupExhibits-box">
    <t-dialog
      placement="center"
      :loading="loading"
      :header="store.addGroupExhibitsShowName"
      :visible="store.addGroupExhibitsShow"
      :confirm-on-enter="true"
      :on-cancel="closetable"
      :on-close="closetable"
      :cancelBtn="null"
      :confirmBtn="null"
    >
      <template #body>
        <addTable
          ref="addtableRef"
          v-if="store.addGroupExhibitsShow"
          :heardType="store.addGroupExhibitsShowSelectId"
          @addExhibit="addExhibitArray"
          :right="false"
          :tabType="datas"
        />
      </template>
      <template #footer>
        <span class="footer-btm-num">已选 {{ selectModel.length }} 条</span>
        <t-button @click="closetable" theme="default" variant="outline">取消</t-button>
        <t-button @click="ok">确认添加</t-button>
      </template>
    </t-dialog>
  </div>
</template>
 
<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next';
import { getMOdeListArr } from '@/utils/getRemComputed';
import { treeList } from '@/api/user/user';
import addTable from './addTable.vue';
import { ref, reactive, watch } from 'vue';
import { useProjectStore } from '@/store';
import { addExhibits } from '@/api/desgin/desgin';

const datas = reactive({
  select1: [], //级别
  select2: [], //来源
  select3: [], //类型
  select4: [], //年代
});
const addtableRef = ref();
const loading = ref(false);
const store = useProjectStore();
const selectModel = ref([]);
const closetable = (context?: any): void => {
  store.setaddGroupExhibitsShow(false);
};
const ok = async () => { 
  try {
    if (loading.value) {
      return;
    }
    if (selectModel.value.length > 0) {
      let idList = getMOdeListArr(store.templateMOdeList, store.contextmenuchildId);
      let parentId: number = 0;
      if (idList.length === 1) {
        parentId = store.templateMOdeList[idList[0]].id;
        if (store.selectAuxiliaryIndex !== -1) {
          parentId = store.templateMOdeList[idList[0]].auxiliaryList[store.selectAuxiliaryIndex].id;
        }
      } else if (idList.length === 2) {
        parentId = store.templateMOdeList[idList[0]].children[idList[1]].id;
        if (store.selectAuxiliaryIndex !== -1) {
          parentId = store.templateMOdeList[idList[0]].children[idList[1]].auxiliaryList[store.selectAuxiliaryIndex].id;
        }
      } else if (idList.length === 3) {
        parentId = store.templateMOdeList[idList[0]].children[idList[1]].children[idList[2]].id;
        if (store.selectAuxiliaryIndex !== -1) {
          parentId =
            store.templateMOdeList[idList[0]].children[idList[1]].children[idList[2]].auxiliaryList[
              store.selectAuxiliaryIndex
            ].id;
        }
      }
      loading.value = true;
      let res = await addExhibits(localStorage.getItem('projectId'), parentId, selectModel.value);
      if (res.data && res.succeeded) {
        MessagePlugin.success('添加成功' + res.data + '条数据');
      } else {
        loading.value = false;
        return;
      }

      loading.value = false;

      // visible1.value = false;

      store.addGroupExhibitsShow = false;
      console.log(store.contextmenuGroupId, '当前位置');
      if (store.contextmenuGroupId !== -1) {
        store.addChildlistExhibitGroup(idList, selectModel.value);
      } else {
        store.addChildlistExhibit(idList, selectModel.value);
      }
      addtableRef.value.clearList();
      selectModel.value = [];

      // 455196062429253;
    } else {
      MessagePlugin.error('请选择展品');

      return;
    }
  } catch (err) {
    console.log(err);
    loading.value = false;
  }
  // store.setaddGroupExhibitsShow(false)
};
const initSelect = async () => {
  //初始化所有下拉选项
  treeList(371994471206981).then((res) => {
    datas.select1 = res.data;
  }); //级别
  treeList(371996102197317).then((res1) => {
    datas.select2 = res1.data;
  }); //来源
  treeList(371999507447877).then((res2) => {
    datas.select3 = res2.data;
  }); //类型
  treeList(372051821408325).then((res3) => {
    datas.select4 = res3.data;
  }); //年代
};
const addExhibitArray = async (e: any) => {
  selectModel.value = e;
};
initSelect();
watch(
  () => store.addGroupExhibitsShow,
  () => {
    selectModel.value = [];
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.addGroupExhibits-box {
  :deep(.t-dialog) {
    width: 1144px;
    // height: 77.78vh;
  }
  :deep(.t-dialog__footer) {
    padding: 24px;
  }
  :deep(.t-dialog__header) {
    box-shadow: none;
  }
  :deep(.t-dialog__body) {
    padding: 0px 24px;
  }
}
:deep(.t-button) {
  margin-left: 12px !important;
}
</style>